<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框</title>
    <style>
    #modal {
        height: 200px;
        width: 200px;
        line-height: 200px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid black;
        text-align: center;
    }
    </style>
</head>
<body>
    <button id="open">打开弹框</button>
    <button id="close">关闭弹框</button>
    <script>
    // Modal类 实例化很多次 , 只实例化一次, 叫单例模式
    // 推迟  Modal 的实例化的时间 到第一次显示 ?
    // 立即执行函数 
    // 构建Modal 类
        // 1. 立即执行函数 + 返回函数
        //     函数嵌套函数  闭包 
        // 2. return  有的 如果在构造函数中手动指定return  new 的高级用法
        // 满足单例
    const Modal = (function() {
        // console.log('立即执行函数');
        let modal = null;   // 模态框  永生
        return function() {
            // modal?
            // 函数里面找变量 作用域链的概念  函数嵌套一个函数就叫闭包
            if (!modal) { // 第一次 new  null? 实例化
                modal =  document.createElement('div');
                modal.id = 'modal';
                modal.style.display = 'none';
                modal.innerText = '我是一个全局唯一的Modal';
                document.body.appendChild(modal);
            }
            return modal
        }
    })();
    console.log(typeof Modal);
    // const Modal = function() {
    //     // dom  -> body 
    //     this.modalBox = document.createElement('div');
    //     this.modalBox.id = 'modal';
    //     this.modalBox.style.display = 'none';
    //     this.modalBox.innerText = '我是一个全局唯一的Modal';
    //     document.body.appendChild(this.modalBox);
    // }
    // let modal = new Modal(); // 直接实例化 Modal 
    // 点不点按钮 触发登录相关权限与否, modal 框是不是就已经挂载到页面上了?
    // modal  不是要提前存在的, 
    // modal 第一次  生产  +  显示 
    //     2...n  显示

    // let modal = null;
    // let modal = document.createElement('div');
    // modal.id = 'modal'
    // modal.style.display = 'none';
    // modal.innerText = '我是一个全局唯一的Modal';
    // document.body.appendChild(modal);

    const openButton = document.getElementById('open'),
        closeButton = document.getElementById('close');
    // open close 都会去做实例化 
    // 单例模式的概念是无论实例化多少次, 返回的任然是原来的唯一的实例 
    openButton.addEventListener('click', function() {
        // 弹出框显示出来
        // modal 没有的化   new 
        // 达到推迟的目的 
        let modal = new Modal(); // 局部
        modal.style.display = 'block';
    });
    closeButton.addEventListener('click', function() {
        // 已经显示的弹出框隐藏掉
        let modal = new Modal(); 
        modal.style.display = 'none';
    });
    </script>
</body>
</html>